<template>
  <a-card title="附件信息">
    <a slot="extra" href="#" v-show="!isView">
      <a-button type="primary">
        <icon-font type="icon-wf-chakan" />
        删除
      </a-button>
      <a-divider type="vertical" />
      <a-button type="primary">
        <icon-font type="icon-wf-chakan" />
        上传
      </a-button>
      <a-divider type="vertical" />
      <a-button type="primary">
        <icon-font type="icon-wf-chakan" />
        下载
      </a-button>
    </a>
    <a-table
      :loading="loading"
      rowKey="fileId"
      :columns="columns"
      :data-source="dataSource"
      :row-selection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }"
      :pagination="false">
    </a-table>
  </a-card>
</template>
<script>

import { getFile } from '@/api/system/file'
import ImageUpload from '@/components/FileUpload/imageUpload.vue'

export default {
  name: 'FileList',
  components: { ImageUpload },
  props: {
    bizId: {
      type: String,
      required: true
    },
    isView: {
      type: Boolean,
      default: false
    }
  },
  data () {
    return {
      // loading
      loading: false,
      // 选择的keys
      selectedRowKeys: [],
      // 选择的行
      selectedRows: [],
      // 查询参数
      queryParam: {
        pageNum: 1,
        pageSize: 10,
        bizKey: undefined
      },
      // 数据信息
      dataSource: [],
      columns: [
        {
          title: '序号',
          dataIndex: 'index',
          align: 'center',
          customRender: (text, record, index) => `${(this.queryParam.pageNum - 1) * this.queryParam.pageSize + index + 1}`,
          width: 60
        },
        {
          title: '文件名称',
          dataIndex: 'fileName',
          align: 'center'
        },
        {
          title: '文件大小',
          dataIndex: 'fileSize',
          align: 'center'
        },
        {
          title: '操作',
          dataIndex: 'operation',
          scopedSlots: { customRender: 'operation' },
          align: 'center'
        }
      ]
    }
  },
  created () {
  },
  computed: {},
  watch: {
    bizId: function (val) {
      if (val) {
        this.queryParam.bizKey = val
        this.handleQuery()
      }
    }
  },
  methods: {
    /** 查询 */
    handleQuery () {
      getFile(this.queryParam).then(res => {
        this.dataSource = res.data
      })
    },
    // 分页数量
    onShowSizeChange (current, pageSize) {
      this.queryParam.pageSize = pageSize
      this.handleQuery()
    },
    // 选择分页
    changeSize (current, pageSize) {
      this.queryParam.pageNum = current
      this.queryParam.pageSize = pageSize
      this.handleQuery()
    },
    // 选择表格数据
    onSelectChange (selectedRowKeys, selectedRows) {
      this.selectedRowKeys = selectedRowKeys
      this.selectedRows = selectedRows
      this.single = selectedRowKeys.length !== 1
      this.multiple = !selectedRowKeys.length
    }
  }
}
</script>
